<template>
	<view>
		<view class="top align-center flex flex-direction justify-center">
			<image src="/static/c2.png"></image>
			<text>{{returnOrder.is_return_status}}</text>
			<text>退款金额：{{returnOrder.totle_price}}元</text>
		</view>
		<view class="con">
			<view class="flex align-center flex-direction">
				<view class="listtitle flex align-center">
					<text>协商详情</text>
				</view>
				<view class="list flex align-center">
					<text>退款类型</text>
					<text>{{returnOrder.return_type}}</text>
				</view>
				<view class="list flex align-center">
					<text>退款金额</text>
					<text>{{returnOrder.totle_price}}元</text>
				</view>
				<view class="list flex align-center">
					<text>退款原因</text>
					<text>{{returnOrder.return_result}}</text>
				</view>
				<view class="list flex align-center">
					<text>退款说明</text>
					<text>{{returnOrder.return_reamrk}}</text>
				</view>
				<view class="list flex align-center">
					<text>申请时间</text>
					<text>{{returnOrder.return_time}}</text>
				</view>
				<view class="imgList flex align-center flex-direction">
					<text>退款凭证</text>
					<view class="flex align-center justify-between">
						<image :src="returnOrder.imglist[0]"></image>
						<image :src="returnOrder.imglist[1]"></image>
						<image :src="returnOrder.imglist[2]"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				order_goods_id:'',
				returnOrder:'',
			}
		},
		onLoad(opt) {
		 if(opt.key){
			 this.order_goods_id = opt.key
			 console.log(this.order_goods_id)
			 this.loadReturnOrderDetail()	
		 }
		 
		},
		methods: {
			loadReturnOrderDetail(){
				    var dataTemp = {
							order_goods_id: this.order_goods_id,
						}
					console.log('loadReturnOrderDetail:'+JSON.stringify(dataTemp))	
					api.get({
						url: 'UserOrder/GetreturnOrderDetail',
						data: dataTemp,
						success: data => {
							console.log(JSON.stringify(data))
							if (data.ErrCode == 0) {
								this.returnOrder = data.Response
								if(this.returnOrder.return_type==1){
									this.returnOrder.return_type='仅退款'
								}else if(this.returnOrder.return_type==2){
									this.returnOrder.return_type='退货退款'
								}else{
									this.returnOrder.return_type='换货'
								}
								
								if(this.returnOrder.is_return_status==1){
									this.returnOrder.is_return_status='申请中'
								}else if(this.returnOrder.is_return_status==2){
									this.returnOrder.is_return_status='成功'
								}else{
									this.returnOrder.is_return_status='被拒绝'
								}
							}
						}
					});
				},
		}
	}
</script>

<style lang="scss" scoped>
	.imgList{
		width: 100%;
	}
	.imgList>view{
		padding:0 18upx;
		box-sizing: border-box;
		width: 100%;
		margin-bottom: 20upx;
	}
	.imgList>view>image{
		width: 211upx;
			height: 158upx;
	}
	.imgList>text{
		font-size: 26upx;
			color: #666666;
			height: 74upx;
			line-height: 74upx;
	}
	.list{
		width: 100%;
		border-bottom: 1upx solid #ddd;
		height: 86upx;
		padding-left: 24upx;
		box-sizing: border-box;
	}
	.list>text:nth-child(1){
			font-size: 26upx;
			color: #666666;
			margin-right: 60upx;
	}
	.list>text:nth-child(2){
		font-size: 26upx;
			color: #000000;
	}
	.con>view{
		background-color: #fff;
	}
	.listtitle{
		width: 100%;
		height: 84upx;
		padding-left: 24upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #ddd;
	}
	.listtitle text{
		font-size: 28upx;
			color: #010101;
	}
	.con{
		padding: 20upx 15upx;
		box-sizing: border-box;
	}
	.top>text:nth-child(2){
		font-size: 32upx;
			color: $btn-bground;
			margin-top: 10upx;
	}
	.top>text:nth-child(3){
		font-size: 24upx;
			color: #666666;
			margin-top: 20upx;
	}
	.top image{
		width: 64upx;
			height: 64upx;
	}
	.top{
		width: 100%;
		background-color: #fff;
		padding-bottom: 30upx;
		padding-top: 42upx;
	}
</style>
